<template>
  <div style="width: 100%; height: 100%" ref="echarts"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      echarts: null,
      circleColor: [

          {
            colorStops: [
              {
                color: "#2193b0",
              
                offset: 0
              },
              {
                color: "#e90b0e",
              
                offset: 1
              }
            ],
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            type: "linear",
            global: false
          },
        
          "#61ddaa",
          "#65789b",
          "#f6bd16",
          "#7262fd",
          "#78d3f8",
          "#9661bc",
          "#f6903d",
          "#008685",
          "#f08bb4"],
      model: [
          {
                name: "类型一"
              ,
                value: 262
              ,
                子属性1: 890
              ,
                子属性2: "1345km"
              
          },
          {
                name: "类型二"
              ,
                value: 278
              ,
                子属性1: 890
              ,
                子属性2: "1345km"
              
          },
          {
                name: "类型三"
              ,
                value: 660
              ,
                子属性1: 890
              ,
                子属性2: "1345km"
              
          }
      ]
    };
  },
  methods: {
    formatModelData() {
      const seriesDataObj = {};
      this.model.forEach(v => {
        seriesDataObj[v.name] = {};
        const obj = seriesDataObj[v.name];
        obj.name = v.name;
        obj.value = v.value;
        obj.subProps = [];
        for (let key in v) {
          if (!["name", "value"].includes(key)) {
            obj.subProps.push({ name: key, value: v[key] });
          }
        }
      });
      return seriesDataObj;
    },
    baseOptions() {
      const formatModelData = this.formatModelData();
      return {
        color: this.circleColor,
        title: {
          text: "图表标题",
          left: "left",
          show: true,
          textStyle: {
            color: "rgba(255,255,255,.8)",
            fontSize: 18,
            fontWeight: "normal",
          },
        },
        legend: {
          left: 0,
          top: "55%",
          orient: "vertical",
          itemGap: 20,
          formatter: function(name) {
            const { value } = formatModelData[name];
            let title = "{title|" + name + "：" + value + "}\n";
            formatModelData[name].subProps.forEach((prop, i) => {
              title += "{subTitle" + (i + 1) + "|" + prop.name + "：" + prop.value + "}";
            });
            return title;
          },
          textStyle: {
            padding: [0, 10],
            rich: {
              title: {
                color: "#fff",
                lineHeight: 35,
                fontSize: 14,
              },
              subTitle1: {
                color: "rgba(255, 255, 255, 0.5)",
                width: 100,
              },
              subTitle2: {
                color: "rgba(255, 255, 255, 0.5)",
              },
            },
          },
        },
        series: [
          {
            type: "pie",
            radius: ["30%", "40%"],
            center: ["25%", "30%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            data: this.model.map(v => ({ name: v.id, ...v })),
          },
        ],
      };
    },
    renderEcharts(){
        this.echarts = echarts.init(this.$refs.echarts)
        this.echarts.setOption(this.baseOptions())
    },
    resize(){
        this.echarts.resize()
    }
  },
  mounted(){
    this.$nextTick(function(){
      this.renderEcharts()
    })
  },
};
</script>

<style scoped></style>
